<template>
  <div class="start-node-card" ref="card">
    <!-- 删除蓝点锚点相关代码 -->
    <div class="header">
      <span class="icon"></span>
      <span class="title">开始节点</span>
    </div>
    <div class="desc">开始定义输入参数</div>
    <div class="section-title">输入参数</div>
    <div class="param-list">
      <div v-if="params.length === 0" class="no-param">无输入参数</div>
      <div v-for="(param, idx) in params" :key="idx" class="param-row" style="display:flex;align-items:center;margin-bottom:6px;">
        <el-input v-model="localConfig.params[idx].name" placeholder="请输入参数名称" size="small" style="flex:1;margin-right:8px;" @input="emitChange" />
        <el-checkbox v-model="localConfig.params[idx].required" style="margin-right:8px;" @change="emitChange">必填</el-checkbox>
        <el-button size="mini" style="margin-left:4px;padding:0 6px;" @click="toggleParamSetting(idx)">
          <svg width="16" height="16" viewBox="0 0 16 16" style="vertical-align: middle;">
            <circle cx="8" cy="4" r="1.5" fill="#888"/>
            <circle cx="8" cy="8" r="1.5" fill="#888"/>
            <circle cx="8" cy="12" r="1.5" fill="#888"/>
          </svg>
        </el-button>
      </div>
      <div class="add-param-btn" @click="addParam" style="margin-top:4px;cursor:pointer;display:flex;align-items:center;color:#409eff;">
        <i class="el-icon-plus" style="font-size:16px;margin-right:4px;"></i>添加参数
      </div>
    </div>
    <div v-if="paramSettingIndex !== null" class="param-setting-card-global" ref="settingCard">
      <el-form label-width="80px" style="margin-bottom: 8px;">
        <el-form-item label="参数类型:">
          <el-select v-model="paramSettingForm.type" placeholder="请选择类型">
            <el-option label="String" value="String" />
            <el-option label="Number" value="Number" />
            <el-option label="Boolean" value="Boolean" />
          </el-select>
        </el-form-item>
        <el-form-item label="默认值:">
          <el-input v-model="paramSettingForm.defaultValue" type="textarea" />
        </el-form-item>
        <el-form-item label="参数描述:">
          <el-input v-model="paramSettingForm.desc" type="textarea" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button size="mini" @click="closeParamSetting">取消</el-button>
        <el-button size="mini" type="primary" @click="saveParamSetting(paramSettingIndex)">保存</el-button>
        <el-button size="mini" type="danger" @click="removeParam(paramSettingIndex)">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StartNodeCard',
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  computed: {
    params() {
      // 兼容 config.params 未定义的情况，始终返回数组
      return (this.localConfig && Array.isArray(this.localConfig.params)) ? this.localConfig.params : [];
    }
  },
  data() {
    return {
      localConfig: { ...this.config },
      paramSettingIndex: null,
      paramSettingForm: {},
    }
  },
  watch: {
    config: {
      handler(newVal) {
        this.localConfig = { ...newVal }
      },
      deep: true
    }
  },
  mounted() {
    window.addEventListener('click', this.handleClickOutside, true);
  },
  beforeDestroy() {
    window.removeEventListener('click', this.handleClickOutside, true);
  },
  methods: {
    addParam() {
      if (!Array.isArray(this.localConfig.params)) {
        this.$set(this.localConfig, 'params', []);
      }
      this.localConfig.params.push({ name: '', required: false, type: 'String', defaultValue: '', desc: '' });
      this.emitChange();
    },
    removeParam(idx) {
      this.localConfig.params.splice(idx, 1);
      this.emitChange();
      if (this.paramSettingIndex === idx) this.paramSettingIndex = null;
    },
    toggleParamSetting(idx) {
      if (this.paramSettingIndex === idx) {
        this.paramSettingIndex = null;
      } else {
        this.paramSettingIndex = idx;
        this.paramSettingForm = { ...this.localConfig.params[idx] };
      }
    },
    saveParamSetting(idx) {
      this.$set(this.localConfig.params, idx, { ...this.localConfig.params[idx], ...this.paramSettingForm });
      this.paramSettingIndex = null;
      this.emitChange();
    },
    closeParamSetting() {
      this.paramSettingIndex = null;
    },
    handleClickOutside(e) {
      const card = this.$refs.card;
      const settingCard = this.$refs.settingCard;
      if (!card) return;
      if (settingCard && settingCard.contains(e.target)) return;
      // 判断是否点击了三个点按钮
      let isDotBtn = false;
      card.querySelectorAll('button').forEach(btn => {
        if (btn.contains(e.target)) isDotBtn = true;
      });
      if (isDotBtn) return;
      this.paramSettingIndex = null;
    },
    emitChange() {
      this.$emit('change', { ...this.localConfig })
    }
  },
};
</script>

<style scoped>
.start-node-card {
  width: 300px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  padding: 16px;
  position: relative; /* Added for absolute positioning of setting card */
}
/* 蓝点样式 */
.node-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2979ff;
  border: 2px solid #fff;
  box-shadow: 0 0 2px #2979ff;
  cursor: pointer;
  z-index: 10;
  transition: box-shadow 0.2s;
}
.node-dot--right-top {
  top: -6px;
  right: -6px;
}
.node-dot:hover {
  box-shadow: 0 0 8px #2979ff;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}
.icon {
  width: 32px;
  height: 32px;
  background: #e0eaff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  position: relative;
}
.icon::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: #409eff;
  border-radius: 50%;
  position: absolute;
  left: 8px;
  top: 8px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.desc {
  color: #888;
  font-size: 13px;
  margin-bottom: 8px;
}
.section-title {
  font-weight: bold;
  margin-bottom: 4px;
}
.param-list {
  background: #fafbfc;
  border-radius: 6px;
  padding: 10px;
}
.no-param {
  color: #aaa;
  text-align: center;
}
.param-row {
  margin-bottom: 4px;
}
.add-param-btn {
  color: #409eff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.add-param-btn:hover {
  text-decoration: underline;
}
.more-dropdown {
  margin-right: 4px;
  position: static;
  display: flex;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #888;
  font-size: 20px;
  padding: 4px;
}
.el-dropdown-link:hover {
  color: #409eff;
}
.param-setting-dialog {
  display: none;
}
.el-popover {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding-bottom: 12px;
}
.param-setting-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
  padding: 16px;
  margin-bottom: 8px;
  margin-left: 40px;
  min-width: 300px;
}
.param-setting-card-global {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
  padding: 16px;
  margin-left: 16px;
  min-width: 300px;
}
</style> 